<template>
  <div style="display: flex; flex-direction: column; overflow: hidden;height: 100%;">
    <BreadFadeWidget ref="refBread" :start-index="2" style="padding: 8px 4px 0 8px"
                     :root-path="config.rootItem" :detail-label="config.detail"
                     :trigger-path="triggerPath"/>
    <TableHeaderWidget :header="current().name"/>

    <MenuList ref="refList" v-show="config.isRoot" :entry="{server: SERVERS.ASSET, name: currentNames.MENU}"/>
    <MenuDetail v-show="!config.isRoot" ref="refDetail"/>
  </div>
</template>

<script setup lang="ts" name="menuMng">

import {currentNames, SERVERS} from "@/stores/conf";
import MenuList from "@/views/sop/list/MenuList.vue";
import BreadFadeWidget from "@/widget/BreadFadeWidget.vue";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";
import MenuDetail from "@/views/pages/SystemMng/MenuDetail.vue";
import {useListPage} from "@/utils/sop/UseListPage";

const config = {
  isRoot: true,
  detail: '菜单详情',
  rootItem: {id: '',name: '菜单列表',}
}

const {refBread, refList, refDetail, current, triggerPath} = useListPage(currentNames.MENU, config);

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}
</style>
